<template>
    <div>
        <div>【大区异常处理】</div>
        <div ref="target" class="w-full h-full"></div>
    </div>
</template>
<script setup>
import { ref, onMounted, watch } from 'vue'
import * as echarts from 'echarts'

const props = defineProps({
    data: {
        type: Object,
        required: true
    }
})

// 1、初始化 echarts 实例
let chart = null
const target = ref(null)
onMounted(() => {
    chart = echarts.init(target.value)
    renderChart()
})

// 2、构建 option 配置对象
const getSeriesData = () => {
    const series = []

    props.data.abnormals.forEach((item, index) => {
        // 上层
        series.push({
            name: item.name,
            type: 'pie',
            clockWise: false,
            hoverAnimation: false,
            radius: [73 - index * 15 + '%', 68 - index * 15 + '%'],
            center: ['50%', '50%'],
            label: {
                show: false
            },
            data: [
                {
                    value: item.value,
                    name: item.name
                },
                {
                    value: 1000,
                    itemStyle: {
                        color: 'rgba(0,0,0,0)',
                        borderWidth: 0
                    },
                    tooltip: {
                        show: false
                    },
                    hoverAnimation: false
                }
            ]
        })
        // 底层
        series.push({
            name: item.name,
            type: 'pie',
            silent: true,
            z: 1,
            clockWise: false,
            hoverAnimation: false,
            radius: [73 - index * 15 + '%', 68 - index * 15 + '%'],
            center: ['50%', '50%'],
            label: {
                show: false
            },
            data: [
                {
                    value: 7.5,
                    itemStyle: {
                        color: 'rgba(180, 180, 180, 0.2)',
                        borderWidth: 0
                    },
                    tooltip: {
                        show: false,
                    },
                    hoverAnimation: false
                },
                {
                    value: 2.5,
                    itemStyle: {
                        color: 'rgba(0,0,0,0)',
                        borderWidth: 0
                    },
                    tooltip: {
                        show: false,
                    },
                    hoverAnimation: false
                }
            ]
        })
    })
   

    return series
}

const renderChart = () => {
    const options = {
        // 图例配置
        legend: {
            show: true,
            icon: 'circle',
            top: '14%',
            left: '60%',
            data: props.data.abnormals.map(item => item.name),
            width: -5,
            itemWidth: 10,
            itemHeight: 10,
            itemWGap: 6,
            textStyle: {
                fontSize: 12,
                lineHeight: 5,
                color: '#ffffff'
            }
        },
        // 提示层
        tooltip: {
            show: true,
            trigger: 'item',
            formatter: '{a}<br>{b}:{c}({d}%)'
        },
        // Y 轴
        yAxis: [
            {
                type: 'category',
                inverse: true,
                axisLine: {
                    show: false,
                }
            }
        ],
        // X 轴
        xAxis: [
            {
                show: false,
            }
        ],
        // 核心配置
        series: getSeriesData()
    }

    // 3、通过 实例.setOption(option) 渲染图表
    chart.setOption(options)
}

watch(() => props.data, () => { renderChart() }, { deep: true })
</script>

<style lang="scss" scoped></style>